<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            a: {
                m: {
                    n: 5
                }
            },
            b: 10
        }
        class Observer {
            constructor (value) {
                def(value, '__ob__', this, false)
                for(let key in value) {
                    defineReactive(value, key)
                }
            }
        }
        observe(obj)
        console.log(obj, 'oooooo')
        function observe (value) {
            if(typeof value === 'array') return;

            var ob
            if(typeof value.__ob__ !== 'undefined') {
                return ob = value.__ob__
            }
            if(typeof value === 'object') {
                ob = new Observer(value)
            }
            return ob
        }
        // 为数据设置响应式__ob__数据
        function def(obj, key, value, enumerable) {
            Object.defineProperty(obj , key, {
                value,
                enumerable,
                writable: true,
                configurable: true
            })
        }
        
        function defineReactive(obj, key, val) {
            if(arguments.length === 2) {
                val = obj[key]
            }
            console.log(obj[key], 'obj[key]');
            observe(obj[key])
            console.log(obj, key, val, 'vvvv');
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get() {
                    console.log(`访问${key}属性为${val}`);
                    return val
                },
                set(newVal) {
                    console.log(`修改${key}属性${newVal}`);
                    if(val === newVal) return;
                    val = newVal
                    // observe(newVal)
                }
            })
        }
        // defineReactive(obj, 'b')
        // console.log(obj, obj.b, 'bbb');
        // obj.b = 12
        // console.log(obj.b, 'bbb333');
    </script>
</body>
</html>